<template>
  <div
    class="common-page page-stats-evaluation-government"
    v-loading.fullscreen="loading"
  >
    <div class="common-page__head">
      <!-- <comp-paths class="route" :paths="['/stats', $route.fullPath]"></comp-paths> -->
      <div class="title">
        <div class="text">{{ $options.title }}</div>
        <el-date-picker
          type="date"
          v-model="startTime"
          size="small"
          style="margin-right: 12px; width: 200px"
          format="起始yyyy年M月d日"
          value-format="timestamp"
          placeholder="起始日期"
          :readonly="loading"
          @change="search()"
        ></el-date-picker>
        <el-date-picker
          type="date"
          v-model="endTime"
          size="small"
          style="margin-right: 12px; width: 200px"
          format="截止yyyy年M月d日"
          value-format="timestamp"
          placeholder="截止日期"
          :readonly="loading"
          @change="search()"
        ></el-date-picker>
      </div>
    </div>
    <div class="common-page__body page-stats-evaluation-government__body">
      <div class="row">
        <div class="col col--2em">排名</div>
        <div class="col">自治区级部门</div>
        <div class="col col--4em">总分</div>
      </div>
      <div
        class="row"
        v-for="(government, index) in governmentList"
        :key="government.id"
      >
        <div class="col col--2em">
          <span v-if="government.stats.starsTotal > 0">{{ index + 1 }}</span>
          <span v-else>-</span>
        </div>
        <div class="col">{{ government.name }}</div>
        <div class="col col--4em">{{ government.stats.starsTotal }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from "../mixin";
import { string, int } from "../util";
export default {
  name: "page-stats-evaluation-government",
  title: "评价排名-自治区级职能部门",
  nodes: ["/menu/stats"],
  childs: [],
  mixins: [mixin],
  data: () => ({
    loading: false,
    startTime: null,
    endTime: null,
    governmentList: [],
  }),
  methods: {
    search(clean) {
      if (this.loading) return;
      if (clean) this.governmentList = [];
      let startTime = this.startTime;
      let endTime = this.endTime;
      this.loading = true;
      this.plugins.user
        .getStatsEvaluationGovernment({ startTime, endTime })
        .then((res) => {
          this.loading = false;
          if (res.code === 0) {
            let list = res.data.map((data) => ({
              id: string(data.deptId),
              name: string(data.deptName),
              cityId: string(data.cityId),
              countyId: string(data.areaId),
              stats: {
                starsTotal: int(data.countAll),
              },
            }));
            this.governmentList = list
              .filter((data) => {
                return !data.cityId && !data.countyId;
              })
              .sort((a, b) => {
                let a1 = a.stats.starsTotal;
                let b1 = b.stats.starsTotal;
                return b1 - a1;
              });
          } else {
            this.plugins.modal.toast(
              "加载失败<br>" + res.code + "：" + res.msg,
              "error"
            );
          }
        });
    },
    destroy() {
      if (this.loading) return;
      return true;
    },
    init() {
      if (this.loading) return;
      this.loading = true;
      this.$root.$refs.navbar.init();
      this.plugins.user
        .call(
          async () => {
            let res = await this.plugins.user.init();
            if (res.code === 0) {
            }
            return res;
          },
          async () => {
            if (this.access(this.$route.name)) return { code: 0 };
            return this.env.xhrErrors.find((error) => error.code === 4);
          }
        )
        .then((res) => {
          this.loading = false;
          this.$root.$refs.navbar.init();
          if (res.code === 0) {
            this.search();
          } else if (res.code === 2) {
            this.$root.$refs.navbar.login();
          } else {
            this.plugins.modal
              .alert("页面加载失败", res.code + "：" + res.msg, "error")
              .then(() => this.$router.replace("/home"));
          }
        });
    },
  },
};
</script>

<style lang="scss">
.page-stats-evaluation-government {
  overflow: hidden;
}

.page-stats-evaluation-government__body {
  display: flex;
  flex-direction: column;

  & > .row {
    flex: 0 0 auto;
    display: flex;
    width: 640px;

    & > .col {
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0 2px 2px 0;
      padding: 8px 9px;
      color: #333;
      font-size: 14px;
      line-height: 16px;
      text-align: center;
      background-color: #f6f6f6;

      & > .key {
        color: #1677ff;
      }
    }

    & > .col--click {
      cursor: pointer;
    }

    & > .col--2em {
      flex: 0 0 auto;
      width: 2em;
    }

    & > .col--3em {
      flex: 0 0 auto;
      width: 3em;
    }

    & > .col--4em {
      flex: 0 0 auto;
      width: 4em;
    }

    &:first-child {
      & > .col {
        font-weight: bold;
      }
    }
  }
}
</style>
